<template>
  <div class="schedule-container">
    <h2>课程表</h2>
    <table class="schedule-table">
      <thead>
        <tr>
          <th>时间</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(time, index) in times" :key="index">
          <td class="time-cell" :class="{'highlighted': highlightedTimes.includes(time)}" v-html="time"></td>
          <td v-for="(day, dayIndex) in days" :key="dayIndex" :class="{'highlighted': highlightedTimes.includes(time)}">
            <span v-html="schedule[day][index]"></span>
          </td>
        </tr>
      </tbody>
    </table>
    <el-button type="text" class="exit-button" @click="goToHome">
      <i class="el-icon-back"></i>
      返回
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'Schedule',
  data() {
    return {
      times: [
        '16:30-<br>17:20',
        '17:30-<br>18:20',
        '18:30-<br>19:20',
        '19:30-<br>20:20'
      ],
      days: ['周一', '周二', '周三', '周四', '周五'],
      schedule: {
        '周一': [
          '瑜伽<br>【Sana】',
          '健身操<br>【Lily】',
          '现代舞<br>【Judy】',
          '动感单车<br>【Jake】'
        ],
        '周二': ['核心训练<br>【Joshua】',
          '杠铃操<br>【Felix】',
          '普拉提<br>【Karina】',
          '蹦床<br>【Jackson】'
          ],
        '周三': ['经络瑜伽<br>【Giselle】',
          '东方舞<br>【Ning】',
          '踏板操<br>【Winter】',
          '动感单车<br>【Jackson】'
          ],
        '周四': ['核心训练<br>【Joshua】',
          '尊巴<br>【Jennie】',
          '动感单车<br>【Rose】',
          '流瑜伽<br>【Lisa】'
          ],
        '周五': ['健身球<br>【Jennie】',
          '瑜伽<br>【Sana】',
          '普拉提<br>【Karina】',
          '杠铃操<br>【Felix】'
          ]
      },
      highlightedTimes: [
        '16:30-17:20',
        '17:30-18:20',
        '18:30-19:20',
        '19:30-20:20'
      ] // 需要高亮的时间点
    };
  },
  methods: {
    goToHome() {
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>
.schedule-container {
  min-height:95.7vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background-image: url(../assets/img/coursetable.jpg);
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中显示 */
}

.schedule-container h2 {
  font-size: 36px;
  color: #000000; /* 设置标题颜色为黑色 */
  margin-bottom: 20px;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
}

.time-cell {
  font-weight: bold; /* 加粗时间字体 */
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #ddd;
  padding: 17px; /* 增加padding值以增加行高 */
  text-align: left;
  color: #000000; /* 设置单元格文本颜色为黑色 */
  background-color: rgba(255, 255, 255, 0.8); /* 为单元格添加半透明白色背景以提高可读性 */
}

.schedule-table th {
  background-color: rgba(255, 255, 255, 0.8); /* 为表头添加半透明白色背景 */
}

.exit-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: transparent;
  color: #000000; /* 设置按钮文本颜色为黑色 */
  border: none;
  font-size: 50px;
  font-family: 'Arial', sans-serif;
}

.exit-button i {
  margin-right: 5px;
}
</style>